<!-- 15、145 -->
<template>
	<div>
		<a-space class="common-button-group">
			<a-button
				type="primary"
				:loading="searchBtnLoading"
				@click="handleSearch"
				>{{ $t('common_query') }}</a-button
			>
		</a-space>
		<t-query-form
			layout="inline"
			group="glassInformation"
			ref="queryForm"
			:rules="rules"
			:model="queryForm"
		>
			<a-form-item :label="$t('T9_shopId')" name="shopId">
				<a-select
					v-model:value="queryForm.shopId"
					:placeholder="$t('common_pleaseSelect')"
					class="select-width"
				>
					<a-select-option
						v-for="item in options.shopIdList"
						:key="item.value"
						:value="item.value"
						>{{ item.label }}</a-select-option
					>
				</a-select>
			</a-form-item>
			<a-form-item :label="$t('T9_cstId')" name="cstId">
				<a-input
					v-model:value="queryForm.cstId"
					allow-clear
					class="select-width"
					:placeholder="$t('common_pleaseEnter1')"
				/>
			</a-form-item>
			<a-form-item :label="$t('T9_glassId')" name="glassId">
				<a-select
					v-model:value="queryForm.glassId"
					show-search
					allow-clear
					:placeholder="$t('common_pleaseSelect')"
					class="select-width"
				>
					<a-select-option
						v-for="item in options.glassIdList"
						:key="item.value"
						:value="item.value"
						>{{ item.label }}</a-select-option
					>
				</a-select>
			</a-form-item>
		</t-query-form>
    <a-tabs v-model:activeKey="activeKey" @change="handleSearch">
      <a-tab-pane key="glassInformation" :tab="$t('T9_glasslnformation')">
        <a-row
          type="flex"
          justify="space-between"
          align="middle"
          class="global-oper-row"
        >
          <a-col :span="15" class="global-oper-row-title">{{
            $t('T9_glasslnformation')
          }}</a-col>
        </a-row>
        <t-table
          :loading="glassInformationList.loading"
          :data="glassInformationList.tableData"
          :menu-config="tableMenu"
          @menu-click="handleClickTableMenu"
        >
          <t-column field="glassId" :title="$t('T9_glassId')" />
          <t-column field="shipGroupId" :title="$t('T9_shipGroupId')" />
          <t-column field="cfGlassId" :title="$t('T9_cfGlassId')" />
          <t-column field="cfGroupId" :title="$t('T9_cfGroupId')" />
          <t-column field="shopId" :title="$t('T9_shopId')" />
          <t-column field="cstId" :title="$t('T9_cstId')" />
          <t-column field="bayId" :title="$t('T9_bayId')" />
          <t-column field="owner" :title="$t('T9_owner')" />
          <t-column field="productType" :title="$t('T9_productType')" />
          <t-column field="odfGroupId" :title="$t('T9_odfGroupId')" />
          <t-column field="glassType" :title="$t('T9_glassType')" />
          <t-column field="qtapGroup" :title="$t('T9_qtapGroup')" />
          <t-column field="slot" :title="$t('T9_slot')" />
          <t-column field="productId" :title="$t('T9_productId')" />
          <t-column field="priority" :title="$t('T9_priority')" />
          <t-column field="route" :title="$t('T9_route')" />
          <t-column field="operation" :title="$t('T9_operation')" />
          <t-column field="glassGrade" :title="$t('T9_glassGrade')" />
          <t-column field="panelGrades" :title="$t('T9_panelGrades')" />
          <t-column field="productState" :title="$t('T9_productState')" />
          <t-column field="panelQty" :title="$t('T9_panelQty')" />
          <t-column field="destinationGlassId" :title="$t('T9_destinationGlassId')" />
          <t-column field="lastEventUser" :title="$t('T9_lastEventUser')" />
          <t-column field="lastEventName" :title="$t('T9_lastEventName')" />
          <t-column field="lastComment" :title="$t('T9_lastComment')" />
          <t-column field="fastRunFlag" :title="$t('T9_fastRunFlag')" />
          <t-column field="sortGrade" :title="$t('T9_sortGrade')" />
          <t-column field="cqltId" :title="$t('T9_cqltId')" />
          <t-column field="reworkCount" :title="$t('T9_reworkCount')" />
          <t-column field="processState" :title="$t('T9_processState')" />
          <t-column field="bareGlassName" :title="$t('T9_bareGlassName')" />
          <t-column field="inlineReworkCount" :title="$t('T9_inlineReworkCount')" />
          <t-column field="holdState" :title="$t('T9_holdState')" />
          <t-column field="holdCode" :title="$t('T9_holdCode')" />
          <t-column field="reworkState" :title="$t('T9_reworkState')" />
          <t-column field="reworkCode" :title="$t('T9_reworkCode')" />
          <t-column field="reworkCount" :title="$t('T9_reworkCount')" />
          <t-column field="rtirStartFlag" :title="$t('T9_rtirStartFlag')" />
          <t-column field="rwCauseEq" :title="$t('T9_rwCauseEq')" />
        </t-table>
        <a-row
          type="flex"
          justify="space-between"
          align="middle"
          class="global-oper-row mt-1"
        >
          <a-col :span="15" class="global-oper-row-title">{{
            $t('T9_abnormalCodeList')
          }}</a-col>
          <a-col :span="8" class="global-oper-row-extra">
            <a-button>{{ $t('T9_toExcel') }}</a-button>
          </a-col>
        </a-row>
        <t-table :loading="abnormalCodeList.loading" :data="abnormalCodeList.tableData">
          <t-column field="abnormalName" :title="$t('T9_abnormalName')" />
          <t-column field="abnormalCode" :title="$t('T9_abnormalCode')" />
        </t-table>
      </a-tab-pane>
      <a-tab-pane key="futureHold" :tab="$t('T9_futureHoldList')">
        <a-row
          type="flex"
          justify="space-between"
          align="middle"
          class="global-oper-row"
        >
          <a-col :span="15" class="global-oper-row-title">{{
            $t('T9_futureHoldList')
          }}</a-col>
        </a-row>
        <t-table :loading="futureHoldList.loading" :data="futureHoldList.tableData">
          <t-column field="operation" :title="$t('T9_operation')" />
          <t-column field="reasonCode" :title="$t('T9_reasonCode')" />
        </t-table>
      </a-tab-pane>
      <a-tab-pane key="reworkCount" :tab="$t('T9_reworkCountList')">
        <a-row
          type="flex"
          align="middle"
          class="global-oper-row"
        >
          <a-col :span="3" class="global-oper-row-title">{{
            $t('T9_reworkCountList')
          }}</a-col>
          <a-col :span="1">Route</a-col>
          <a-col :span="8">
            <a-select
              v-model:value="queryForm.route"
              show-search
              allow-clear
              :placeholder="$t('common_pleaseSelect')"
              @change="handleSearch"
              class="select-width"
            >
              <a-select-option
                v-for="item in reworkCountList.routeList"
                :key="item"
                :value="item"
                >{{ item }}</a-select-option
              >
            </a-select>
          </a-col>
        </a-row>
        <t-table
        :loading="reworkCountList.loading"
        :data="reworkCountList.tableData"
        :menu-config="tableMenu"
        @menu-click="handleClickTableMenu"
        >
          <t-column field="glassId" :title="$t('T9_glassId')" />
          <t-column field="route" :title="$t('T9_route')" />
          <t-column field="desc" :title="$t('T9_desc')" />
          <t-column field="reworkCount" :title="$t('T9_reworkCount')" />
          <t-column field="totalReworkCount" :title="$t('T9_totalReworkCount')" />
        </t-table>
      </a-tab-pane>
      <template #tabBarExtraContent>
        <a-button>{{ $t('T9_toExcel') }}</a-button>
      </template>
    </a-tabs>
	</div>
</template>

<script>
  import { defineComponent } from 'vue'
  import initOptionsMixin from '@/mixins/initOptionsMixin'
  import { shopIdList } from '@/views/options'
  import * as api from '@/api/common'

  export default defineComponent({
    name: 'GlassInformation',
    components: {},
    mixins: [initOptionsMixin],
    data() {
      return {
        searchBtnLoading: false,
        activeKey: 'glassInformation',
        tableMenu: {
          body: {
            options: [
              [
                { code: 'glassHistory', name: 'Glass History' }
              ]
            ]
          }
        },
        queryForm: {
          shopId: undefined,
          glassId: undefined,
          route: undefined,
          cstId: ''
        },
        options: {
          shopIdList,
          glassIdList: []
        },
        abnormalCodeList: {
          loading: false,
          tableData: [],
          basicParams: {
            dtoName: 'AbnormalCodeListDTO',
            queryId: 'GetAbnormalCodeList',
            version: '80001',
            menuName: 'glassInformation',
            usage: 'queryAbnormalCodeList'
          }
        },
        glassInformationList: {
          loading: false,
          tableData: [],
          basicParams: {
            queryId: 'GetProductInfo',
            version: '80013',
            dtoName: 'GlassInformationListDTO',
            menuName: 'glassInformation',
            usage: 'queryGlassInformationList'
          }
        },
        futureHoldList: {
          loading: false,
          tableData: [],
          basicParams: {
            queryId: 'GetFutureProductList',
            version: '80001',
            dtoName: 'AbnormalCodeListDTO',
            menuName: 'glassInformation',
            usage: 'queryFutureHoldList'
          }
        },
        reworkCountList: {
          loading: false,
          tableData: [],
          routeList: [],
          basicParams: {
            queryId: 'GetProductReworkCount',
            version: '80003',
            dtoName: 'ReworkCountRouteListDTO',
            menuName: 'glassInformation',
            usage: 'queryReworkCountList'
          }
        },
        rules: {
          shopId: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'change'
            }
          ],
          glassId: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'change'
            }
          ]
        }
      }
    },
    computed: {},
    created() {
      this.initOptions([
        { name: 'glassId', params: { cstId: this.queryForm.cstId } }
      ])
    },
    methods: {
      handleClickTableMenu({ row }) {
        this.$router.push({ path: '/t9/glassHistory', query: { glassId: row.glassId } })
      },
      getTableList(type = 'glassInformation') {
        this[`${type}List`].loading = true
        const params = { ...this[`${type}List`].basicParams, ...this.queryForm }
        return api
          .getList(params)
          .then((res) => {
            this[`${type}List`].loading = false
            if (type === 'reworkCount') {
              this.reworkCountList.tableData = res.reworkCountListDTOList || []
              this.reworkCountList.routeList = res.routeList || []
            } else {
              this[`${type}List`].tableData = res || []
            }
          })
          .catch((error) => {
            this[`${type}List`].loading = false
            console.error(error)
          })
      },
      handleSearch(activeKey = '') {
        this.$refs.queryForm
          .validate()
          .then(() => {
            if (this.searchBtnLoading) return
            this.searchBtnLoading = true
            const key = activeKey === '' ? this.activeKey : activeKey
            Promise.all([this.getTableList(key)]).then(() => { this.searchBtnLoading = false })
          })
          .catch((error) => {
            console.log('error', error)
          })
      }
    }
  })
</script>
<style lang='less' scoped>
.select-width {
	width: 120px;
}
</style>
